<template>
    <global-layout>
        <section class="global-notice" slot="notice">
            <span class="tag">通知</span>
            <span style="flex:1;padding: 0 15px;">{{ noticeText }}</span>
            <i class="el-icon-close"></i>
        </section>
        <section slot="main">
            <h3 align="center" style="line-height: 30px;">平台上线通知！</h3>
            <el-input type="textarea" :rows="5" placeholder="请输入内容" v-model="noticeText"></el-input>
            <el-button type="primary" :loading="loading" @click.native="commit">提交</el-button>
        </section>
    </global-layout>
</template>

<script>
import {Input, Button} from 'element-ui';
import moment from 'moment';
export default {
    name: 'notice',
    data() {
        return {
            loading: false,
            noticeText: ''
        };
    },
    components: {
        elInput: Input,
        elButton: Button
    },
    created() {
        const start = ` ${moment().format('YYYY-MM-DD')} 10:00:00 `;
        const end = ` ${moment().format('YYYY-MM-DD')} 12:00:00 `;
        this.noticeText = `平台将于${start} 至 ${end}期间进行升级维护。给您带来的不便，敬请谅解！`;
    },
    methods: {
        commit() {
            this.loading = true;
            this.$store
                .dispatch('notice/write', {
                    data: {
                        noticeText: this.noticeText
                    }
                })
                .then(() => {
                    this.loading = false;
                    this.$message({
                        message: '设置成功',
                        type: 'success'
                    });
                });
        }
    }
};
</script>
<style lang="postcss" scoped>
.global-notice {
    width: 100%;
    height: 45px;
    background-color: rgba(64, 158, 255, 0.1);
    color: #409eff;
    padding: 0 45px;
    font-size: 12px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    .tag {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 26px;
        padding: 0 10px;
        border-radius: 4px;
        color: #fff;
        background-color: #409eff;
        border: 1px solid rgba(64, 158, 255, 0.2);
        border-color: rgba(103, 194, 58, 0.2);
        white-space: nowrap;
    }
}
</style>
